<template>
  <div>
    <el-form :model="loginForm" :rules="loginRule" ref="loginForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
      <h3 class="title">系统登录</h3>
      <el-form-item prop="uid">
        <el-input type="text" v-model="loginForm.uid" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit" :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>

    <div style="position:absolute;top:25%;right:10px;padding: 5px;z-index: 100;">
      <div style="text-align:center;margin-bottom:5px;color:#f00">扫码下载app</div>
      <div style="width: 120px;height: 120px;">
        <img :src="qrCodeDomain" width="100%" height="100%"/>
      </div>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";

export default {
  data() {
    return {
      logining: false,
      loginForm: {
        uid: "",
        password: ""
      },
      loginRule: {
        uid: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      checked: true
    };
  },
  methods: {
    handleSubmit(ev) {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 获取token
          this.logining = true;
          var params = this.formatHttpGetParams({
            uid: this.loginForm.uid,
            password: md5(this.loginForm.password)
          });
          var path = "api/auth/token";
          var _this = this;
          this.$http.get(this.$store.state.domain + path + params).then(
            function(res) {
              if (res.body.respCode == "0000") {
                var token = res.body.data;
                sessionStorage.setItem("token", token);

                //获取当前登录用户信息
                var params2 = this.formatHttpGetParams({ token: token });
                var path2 = "api/users/current";
                this.$http.get(this.$store.state.domain + path2 + params2).then(
                  function(res) {
                    if (res.body.respCode == "0000") {
                      this.logining = false;
                      var user = new Object();
                      user.id = res.body.data.id;
                      user.uid = res.body.data.uid;
                      user.level = res.body.data.level;
                      user.name = res.body.data.name;
                      user.company = res.body.data.company;
                      user.address = res.body.data.address;
                      user.phone = res.body.data.phone;
                      user.logo_url = res.body.data.logo_url;
                      user.description = res.body.data.description;
                      user.active = res.body.data.active;

                      sessionStorage.setItem("user", JSON.stringify(user));
                      console.log(JSON.stringify(user));

                      //登陆成功，跳转
                      this.$router.push({ path: "/main" });
                    } else {
                      if (res.body.respMsg != null) {
                        alert(res.body.respMsg);
                      } else {
                        alert("后台未知异常，请与管理员联系");
                      }
                      this.logining = false;
                    }
                  },
                  function() {
                    alert("网络请求处理失败");
                    this.logining = false;
                  }
                );
              } else {
                if (res.body.respMsg != null) {
                  alert(res.body.respMsg);
                } else {
                  alert("后台未知异常，请与管理员联系");
                }
                this.logining = false;
              }
            },
            function() {
              alert("网络请求处理失败");
              this.logining = false;
            }
          );
        } else {
          alert("登录异常！");
          this.logining = false;
        }
      });
    }
  },
  computed: {
    qrCodeDomain() {
      return this.$store.state.qrCodeDomain;
    }
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .remember {
    margin: 0px 0px 35px 0px;
  }
}
</style>